<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="clearfixtable form"><span class="colorblock"></span>数据图表</span>
          <div class="block">
            <span class="demonstration"  @click="changeData()" :class="isActive">今日</span>
            <span class="demonstration"  @click="changeWeek()" :class="isActive2">本周</span>
            <span class="demonstration" @click="changeMonth()" :class="isActive1">本月</span>
            <el-date-picker
              v-model="value2"
              type="monthrange"
              align="right"
              unlink-panels
              range-separator="-"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
      </div>
      <div id="mybar" style="width:1200px;height:500px" v-show="type==0" ></div>
      <div id="mybarWeek" style="width:1200px;height:500px" v-show="type==1" ></div>
      <div id="mybarMonth" style="width:1200px;height:500px" v-show="type==2" ></div>
     </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts"
import {getTemperatureApi,getWeekTemApi,getMonthTemApi} from "../../../api/detaiApi"
export default {
    data() {
        return {
          isActive:'today',
          isActive1:'',
          isActive2:'',
          type:0,
          pickerOptions: {
            shortcuts: [{
              text: '本月',
              onClick(picker) {
                picker.$emit('pick', [new Date(), new Date()]);
              }
            }, {
              text: '今年至今',
              onClick(picker) {
                const end = new Date();
                const start = new Date(new Date().getFullYear(), 0);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近六个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setMonth(start.getMonth() - 6);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
          value2: '',
        }
    },
   mounted(){
      this.initEchart([],[]);
      this.initEchartWeek([],[]);
      this.initEchartMonth([],[]);
      this.initGetData();
      this.initGetWeekData();
      this.initGetMonthData()
   },
   
   methods:{
     changeMonth(){
      this.isActive2=""
      this.isActive=''
      this.isActive1 = 'today'
      this.type=2
     },
     changeWeek(){
      this.type = 1
      this.isActive2="today"
      this.isActive=''
      this.isActive1 = ''
     },
     changeData(){
      this.type = 0
      this.isActive="today"
      this.isActive2=''
      this.isActive1 = ''
     },
     initGetMonthData(){
       getMonthTemApi().then(res=>{
        //  console.log(res);
        if(res.code==200){
          let arr = []
          let brr = []
          res.data.forEach(item=>{
            arr.push(item.OutdoorHumidity);
            brr.push(item.OutdoorTemperature);
          })
          this.initEchartMonth(arr,brr)
        }
       })
     },
     initGetWeekData(){
       getWeekTemApi().then(res=>{
        //  console.log(res);
        if(res.code==200){
           var Arr = []
           var Brr = []
          res.data.forEach(item=>{
              Arr.push(item.OutdoorHumidity);
              Brr.push(item.OutdoorTemperature);
          })
          this.initEchartWeek(Arr,Brr)
        }
       })
     },
     initGetData(){
         getTemperatureApi().then(res=>{
            // console.log(res);
            if(res.code==200){
              var Arr = []
              var Brr = []
              res.data.forEach(item=>{
                Arr.push(item.OutdoorHumidity);
                Brr.push(item.OutdoorTemperature);
              })
              this.initEchart(Arr,Brr);
            }
          })
       },
       initEchart(Arr,Brr){
          let mychart = echarts.init(document.getElementById("mybar"));
          mychart.setOption({
                  tooltip: {
                    trigger: 'axis'
                  },
                  legend: {
                    icon: "roundRect",
                    top: "5%", // bottom:"20%" // 组件离容器的距离
                    right: "55", //left:"10%"  // // 组件离容器的距离
                  },
                  toolbox: {
                  },
                  
                  xAxis: {
                    splitLine: {
                      lineStyle: {
                        type: "dashed", //虚线
                      },
                      show: true, //隐藏
                    },
                    axisLine: { // x轴变虚线
                      show: false,
                    },
                    axisTick: { // 隐藏刻度
                      show: false,
                    },
                    boundaryGap: false,
                    data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22/h']
                  },
                  yAxis: {
                    min:7,
                    max:38,
                    interval:8,
                    type: 'value',
                    axisLabel: {
                      formatter: '{value} °C'
                    },
                    splitLine: {
                      lineStyle: {
                        type: "dashed", //虚线
                      },
                      show: true, //隐藏
                    }
                  },
                  series: [
                    {
                      name: '室内温度',
                      type: 'line',
                      smooth: true,
                      data:Arr,
                      symbol: 'none',  
                    },
                    {
                       name: '室外温度',
                       type: 'line',
                       smooth: true,
                       data: Brr,
                       symbol: 'none', 
                    }
                  ]
                });
       },
       initEchartWeek(Arr,Brr){
          let mychartWeek = echarts.init(document.getElementById("mybarWeek"));
          mychartWeek.setOption({
                  tooltip: {
                    trigger: 'axis'
                  },
                  legend: {
                    top: "5%", // bottom:"20%" // 组件离容器的距离
                    right: "55", //left:"10%"  // // 组件离容器的距
                    icon: "roundRect",
                  },
                  toolbox: {
                  },
                  xAxis: {
                    axisLine: { // x轴变虚线
                      show: false,
                    },
                    axisTick: { // 隐藏刻度
                      show: false,
                    },
                    type: 'category',
                    boundaryGap: false,
                    data:  ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    splitLine: {
                      lineStyle: {
                        type: "dashed", //虚线
                      },
                      show: true, //隐藏
                    },
                  },
                  yAxis: {
                    min:7,
                    max:38,
                    interval:8,
                    type: 'value',
                    splitLine: {
                      lineStyle: {
                        type: "dashed", //虚线
                      },
                      show: true, //隐藏
                    },
                    axisLabel: {
                      formatter: '{value} °C'
                    }
                  },
                  series: [
                    {
                      name: '室内温度',
                      type: 'line',
                      smooth: true,
                      data:Arr,
                      symbol: 'none',  
                    },
                    {
                       name: '室外温度',
                       type: 'line',
                       smooth: true,
                       data: Brr,
                       symbol: 'none', 
                    }
                  ]
                });
       },
         initEchartMonth(arr,brr){
          let mychartMonth = echarts.init(document.getElementById("mybarMonth"));
          mychartMonth.setOption({
                  tooltip: {
                    trigger: 'axis'
                  },
                  legend: {
                    top: "5%", // bottom:"20%" // 组件离容器的距离
                    right: "55", //left:"10%"  // // 组件离容器的距离
                    icon: "roundRect",
                  },
                  toolbox: {
                  },
                  xAxis: {
                    axisLine: { // x轴变虚线
                      show: false,
                    },
                    axisTick: { // 隐藏刻度
                      show: false,
                    },
                    type: 'category',
                    boundaryGap: false,
                    data:  ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16',
                            '17','18','19','20','21','22','23','24','25','26','27','28','29','30'
                    ],
                    splitLine: {
                      lineStyle: {
                        type: "dashed", //虚线
                      },
                      show: true, //隐藏
                    },
                  },
                  yAxis: {
                    min:23,
                    max:38,
                    interval:8,
                    type: 'value',
                    splitLine: {
                      lineStyle: {
                        type: "dashed", //虚线
                      },
                      show: true, //隐藏
                    },
                    axisLabel: {
                      formatter: '{value} °C'
                    }
                  },
                  series: [
                    {
                      name: '室内温度',
                      type: 'line',
                      smooth: true,
                      data:arr,
                      symbol: 'none',  
                    },
                    {
                       name: '室外温度',
                       type: 'line',
                       smooth: true,
                       data: brr,
                       symbol: 'none', 
                    }
                  ]
                });
       }
   }
}
</script>

<style lang="less" scoped>
  // 日历插件样式
  .block{
    .demonstration{
      font-size: 12px;
      font-weight: 600;
      margin-right: 16px;
    }
    .today{
      color: #B1BDFF;
    }
    /deep/.el-date-editor {
      width: 165px;
    }
    /deep/.el-range-input{
      width: 50px;
    }
  }
  .el-card{
      /deep/.el-card__header{
        border-bottom: none;
      }
  }
  .clearfix{
    display: flex;
    .form{
      flex: 1;
    }
    .tem{
      font-size: 12px;
      margin-right: 25px;
    }
    .indoor{
      background-color: #4C78F5;
    }
    .outdoor{
       background-color:#91CC75;
    }
    .temperature{
      display: block;
      width: 22px;
      height: 22px;
      margin-right: 5px;
    }
  }
  .box-card {
      width: 100%;
      border-radius: 15px;
      margin-bottom: 15px;
  }
   .clearfixtable{
      display: flex;
      align-items: center;
      color: #425475;
      font-size: 16px;
      font-weight: 600;
  }
  .colorblock{
      display: block;
      width: 8px;
      height: 22px;
      background-color: #526EFE;
      margin-right: 12px;
      margin-left: 28px;
  }
</style>